<template>
    <div>
        <overlay v-show="$store.state.isOverlay"></overlay>
        <top>
            <h1 slot="tip">详细信息</h1>
        </top>

        <ul class="listBox">
            <li @click="isOverlay">

                <div class="i1">
                    <h1>头像</h1>
                </div>
                <div class="i2">
                    <img :src="this.$store.state.head_img" alt="">
                    <van-icon name="arrow" />
                </div>
            </li>
        </ul>

        <action></action>
    </div>
</template>

<script>
import { Toast } from 'vant'
import top from './setTop.vue'
import overlay from '../../components/Overlay.vue'
import action from '../../components/ActionSheet.vue'
export default {
  components: {
    top,
    overlay,
    action
  },
  data () {
    return {
    }
  },
  methods: {
    isOverlay () {
      this.$store.commit('overlayChanged', true)
      this.$bus.$emit('action_sheet1')
      // this.$store.state.head_img = 'http://r7ij7rcyr.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720220222134036.jpg'
      // this.$store.commit("head_imgChanged",'http://r7ij7rcyr.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720220222134036.jpg')
      //   let imgUrl = 'http://r7ij7rcyr.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720220222134036.jpg'
      //   this.request.get('/api/head_imgChanged',{imgUrl})
      //     .then((res) => {
      //       console.log(res)
      //     })
    }
  }

}
</script>

<style scoped>
.listBox li{
    width: 95%;
    height: 3.5rem;
    border-top: 1px solid rgb(207, 199, 199);
    border-bottom: 1px solid rgb(207, 199, 199);
    margin: 0 auto;
}
.listBox li .i1{
    width: 80%;
    line-height: 3.5rem;
    float: left;
}
.listBox li .i2{
    width: 20%;
    line-height: 3.5rem;
    float: left;
}
.listBox h1{
    font-size: 1.25rem;
    color: black;
}
.listBox img{
    width: 50px;
    height: 50px;
    float: left;
}
.listBox i{
    width: 20px;
    line-height: 3.5rem;
    float: left;
    font-size: 1.25rem;
}
</style>
